<template>
<footer>
  <ul>
    <li class="fl" @click="select(item, index)" v-for="(item, index) in dataList">
      <img :src="selectedIndex == index ? item.activeImgSrc : item.normalImgSrc" alt="" />
      <p :class='{"active": selectedIndex == index}'>{{item.value}}</p>
    </li>
  </ul>
</footer>
</template>

<script type="text/javascript">
export default {
  name: 'bottom-bar',
  data() {
    return {
      selectedIndex: 0
    }
  },
  props: {
    onSelected: {
      type: Function
    },
    dataList: {
      type: Array
    }
  },
  methods: {
    forceSelect: function(index) {
      this.selectedIndex = index;
    },
    select: function(item, index) {
      this.selectedIndex = index;
      this.onSelected(item, index);
    }
  }
}
</script>

<style scoped>
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 24px;
  width: 100%;
  background-color: white;
  box-shadow: 0 -2px 6px 0 rgba(34, 34, 34, 0.1);
  z-index: 19999999;
}

footer li {
  display: inline-block;
  width: 33.333333%;
  height: 94px;
  text-align: center;
  margin-top: 16px;
}

footer li img {
  display: inline-block;
  width: 40px;
  height: 40px;
}

.active {
  color: #309fea;
}
</style>
